/*
 * @Title: 
 * @Created by: ycq
 */
<template>
	
	<view >
		<view :style="{height:statusBarHeight}" class="uni-status-bar"></view>
		<view class="screen">	
		<view class="screen-head">
			<view class="line"></view>
			<text>筛选视频</text>
			<view class="line"></view>
		</view>
		<view class="screen-box">
			<view class="screen-box-label">
				<text>全部类型</text>
			</view>
			<view class="screen-box-list">
				<view class="screen-box-item">名胜古迹</view>
				<view class="screen-box-item">主题乐园</view>
				<view class="screen-box-item">宗教寺庙</view>
				<view class="screen-box-item">自然风景</view>
			</view>
		</view>
		<view class="screen-box">
			<view class="screen-box-label">
				<text>景区级别</text>
			</view>
			<view class="screen-box-list">
				<view class="screen-box-item">A</view>
				<view class="screen-box-item">AA</view>
				<view class="screen-box-item">AAA</view>
				<view class="screen-box-item">AAAA</view>
				<view class="screen-box-item">AAAAA</view>
			</view>
		</view>
		<view class="screen-box">
			<view class="screen-box-label">
				<text>历史时间</text>
			</view>
			<view class="screen-box-list">
				<view class="screen-box-item">地质年代</view>
				<view class="screen-box-item">远古时代</view>
				<view class="screen-box-item">奴隶社会</view>
				<view class="screen-box-item">封建社会</view>
			</view>
		</view>
		<view class="screen-box">
			<view class="screen-box-label">
				<text>全部地区</text>
			</view>
			<view class="screen-box-list">
				<view class="screen-box-item">北京</view>
				<view class="screen-box-item">广州</view>
				<view class="screen-box-item">重庆</view>
				<view class="screen-box-item">西安</view>
				<view class="screen-box-item">成都</view>
			</view>
		</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				statusBarHeight:global.statusBarHeight + 'px',
			}
		},
		methods: {
			
		},
		created(){
			console.log(555)
		}
	}
</script>

<style scoped>
	.uni-status-bar {
		display: block;
		width: 100%;
		height: var(--status-bar-height);
		/* border:1upx solid blue */
	}
	.screen{
		height: auto;
		display: table;
		width: 750upx;
		position: absolute;
		background: #FFFFFF;
		/* top: 100upx; */
		margin-top: 80upx;
		border-radius: 0 0 ;
	}
	.screen-head{
		width: 750upx;
		margin-top: 20upx;
		height: 40upx;
		display: flex;
		flex-direction: row;
		margin-bottom: 60upx;
		justify-content: space-between;
	}
	.line{
		height: 2upx;
		margin-top: 19upx;
		background: #D9D9D9;
		width: 268upx;
		
	}
	.screen-head text{
		font-size: 30upx;
		line-height: 40upx;
	}
	.screen-box{
		width:750upx;
		height: auto;
		display: table;
		padding-top: 20upx;
		padding-bottom: 20upx;
		
	}
	.screen-box-label{
		width:130upx;
		height: 56upx;
		background: #CEE4F9;
		border-radius: 10upx;
		display: flex;
		flex-direction: row;
		margin-left: 20upx;
		justify-content: center;
		float: left;
		margin-top: 12upx;
	}
	.screen-box-label text{
		color: #2F99FB;
		font-size: 24upx;
		line-height: 56upx;
	}
	.screen-box-list{
		width: 560upx;
		float: left;
		margin-left: 20upx;
		height: 56upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.screen-box-item{
		color: #666666;
		margin-top: 12upx;
		font-size: 24upx;
		line-height: 56upx;
	}
</style>
